<template>
<div>
  <div class="table-data" v-show="tabShow">
    <div class="search-box">
      <el-input size="small" v-model="searchMap.keyword" placeholder="商品名称"></el-input>
      <el-input size="small" v-model="searchMap.order_sn" placeholder="订单编号"></el-input>
      <el-select v-model="searchMap.shipping_type" clearable placeholder="商品类型">
        <el-option label="物流商品" value="ship"></el-option>
        <el-option label="核销商品" value="code"></el-option>
      </el-select>
      <el-select v-model="searchMap.vendor_id" v-if="manage=='admin'" clearable placeholder="全部供应商">
        <el-option v-for="item in supplierList" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select>
      <el-select v-model="searchMap.shop_id" v-if="manage=='admin'" clearable placeholder="全部商家">
        <el-option v-for="item in businessList" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select>
      <el-select v-model="searchMap.status" clearable placeholder="订单状态">
        <el-option label="待处理" value="wait"></el-option>
        <el-option label="待审核" value="platform_wait"></el-option>
        <el-option label="渠道商拒绝" value="channel_refuse"></el-option>
        <el-option label="平台已拒绝" value="refuse"></el-option>
        <el-option label="退款完成" value="complete"></el-option>
        <el-option label="用户取消退款" value="cancel"></el-option>
      </el-select>
      <el-button size="small" type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
      <!-- <el-button size="small" type="primary" icon="el-icon-search" @click="handleSearch">批量发货</el-button> -->
      <!-- <el-button size="small" type="primary" icon="el-icon-search" @click="handleSearch">导出excel</el-button> -->
    </div>
    <div ref="tableBox" style="overflow:scroll"
        v-loading="loading"
        element-loading-text="正在加载"
        element-loading-spinner="el-icon-loading" >
      
        <el-table  :data="tableData"  style="width:100%" :height="tHeight" class="table-box">
          <el-table-column label="商品信息" width="210">

            <template slot-scope="scope"> 
              <div class="commodity-name">
              <el-popover placement="right" title="" trigger="hover">
                  <img :src="scope.row.orderItem.cover" style="max-width: 300px; max-height: 300px;"/>
                  <img slot="reference" class="commodity-image" :src="scope.row.orderItem.cover" :alt="scope.row.orderItem.cover">
              </el-popover>
              <p style="width: 140px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap" >{{scope.row.orderItem.goods_name}}</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="申请人信息" width="150">
            <template slot-scope="scope">
                <div class="information1">
                  <p>申请人:{{scope.row.orderInfo.user.uc_nickname}}</p>
                </div>
                <div class="phone"><span>电话:</span><span>{{scope.row.orderInfo.user.uc_mobile}}</span></div>
            </template>
          </el-table-column>
          <el-table-column label="规格" prop="spec_item" width="126">
            <template slot-scope="scope">
              {{scope.row.orderItem.spec_item}}
            </template>
          </el-table-column>
          <el-table-column label="总价/数量" width="86">
            <template slot-scope="scope">
              {{scope.row.refund_goods_total}}/{{scope.row.refund_num}}
            </template>
          </el-table-column>
          <el-table-column label="退款原因" prop="reason" width="160"></el-table-column>
          <el-table-column label="申请金额" prop="refund_expect_total" width="80"></el-table-column>
          <!-- <el-table-column label="审核状态" prop="status_txt"></el-table-column> -->
          <el-table-column label="实际退款" prop="refund_amount" width="80"></el-table-column>
          <el-table-column label="申请时间" prop="create_time" width="160"></el-table-column>
          <el-table-column label="状态" prop="status_txt" width="90"></el-table-column>
          <el-table-column label="交易时间" prop="dayTime" width="186">
            <template slot-scope="scope">
            <p>下单 {{scope.row.orderInfo.create_time}}</p>
            <p>支付 {{scope.row.orderInfo.pay_time}}</p>
            </template>
          </el-table-column>

          <el-table-column label="供应商状态" width="100">
            <template slot-scope="scope">
                 <div v-if="scope.row.extension.cancel_status !=='cancel' && scope.row.extension.vendor_id!==1">
                      <p v-if="scope.row.extension.is_push == 1 && scope.row.extension.status == 'wait_vendor'">待供应商审核</p>
                      <p v-if="scope.row.extension.status == 'refuse'">{{scope.row.extension.refuse_reason}}</p>
                      <p v-if="scope.row.extension.status == 'sent_package'">已寄出包裹</p>
                      <p v-if="scope.row.extension.status == 'complete'">供应商已完成退款</p>
                      <div v-if="scope.row.extension.status == 'wait_package'">
                        <span>待寄回包裹</span>
                        <el-button size="mini" type="primary" @click="getrefundLogistics(scope.row.id)">填写</el-button>
                      </div>
                      <el-button size="mini" v-if="scope.row.extension.status == 'wait' && scope.row.status!== 'refuse' && scope.row.status!== 'cancel' && scope.row.status!== 'channel_refuse'" type="primary" @click="pushrefundorder(scope.row.id)">推送</el-button>
                </div>     
            </template>
            
          </el-table-column>

          <el-table-column label="供应商取消状态"  width="100">
            <template slot-scope="scope">
              <div v-if="scope.row.extension.vendor_id!==1">
              <p v-if="scope.row.extension.cancel_status == 'cancel'">已取消退款</p>
              <p v-if="scope.row.extension.status == 'cancel_refuse'">供应商拒绝取消</p>
              <p v-if="scope.row.extension.cancel_status =='wait_cancel'">等待供应商取消</p>
              <el-button size="mini" v-if="scope.row.extension.status == null" type="primary" @click="applicationfordrawback(scope.row.id)">取消供应商退款</el-button>
            </div>
            </template>
            
          </el-table-column>


          <el-table-column label="操作" width="130">
            <template slot-scope="scope">
              <router-link  :to="{name:'refundOrderDetail',query:{id:scope.row.orderInfo.id}}" @click.native="handleDetail()" class="link">详情</router-link>
              -
              <button class="butt-min" @click="handleRefund(scope.row)">退款详情</button>
              <i v-if="scope.row.status == 'wait' || scope.row.status=='platform_wait' || scope.row.status=='wait_cancel'">-</i>
              <button class="butt-min" v-if="scope.row.status == 'wait' || scope.row.status=='platform_wait' || scope.row.status=='wait_cancel'" @click="handleCancelRefund(scope.row)">取消退款</button>
              <i v-if="scope.row.status=='platform_wait' || scope.row.status=='wait'">-</i>
              <button class="butt-min" v-if="scope.row.status=='platform_wait' || scope.row.status=='wait'" @click="handleAdd(scope.row)">审核</button>
            </template>
          </el-table-column>
        </el-table>
      
    </div>
    <div class="pages" ref="page-box">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10,30,50]"
        :page-size="size"
        layout="total,sizes,prev,pager,next,jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
  <router-view @loadData="loadData"></router-view>
  <EditDialog :isAdd="isAdd" :form="formData" :isRefund="isRefund" :details="details" :refundDataDetail="refundDataDetail"  @closeDialog="closeDialog" @loadData="loadData"></EditDialog>
  <RefundDetails :isAdd="isAdd1" :form="formData" :isRefund="isRefund1" :details="details1" :refundDataDetail="refundDataDetail"  @closeDialog="closeDialog1" @loadData="loadData"></RefundDetails>
  <ExamineDialog :form="refundData" :isRefund="isRefund" @closeDialog="closeDialog" @loadData="loadData"></ExamineDialog>
  <div class="logistics" v-if="logisticsShow">
    <div class="logistics-box">
      <div>请填写物流信息</div>
      <el-select v-model="logisticsNews" placeholder="请选择物流公司" v-if="logistics.length!==0">
        <el-option
          v-for="item in logistics"
          :key="item.logistics_code"
          :label="item.logistics_name"
          :value="item">
        </el-option>
      </el-select>
      <el-input v-if="logistics.length==0" v-model="shipping_company" placeholder="请填写物流公司"></el-input>
      <el-input v-if="logistics.length==0" v-model="shipping_code" placeholder="请填写物流公司编码"></el-input>
      <el-input v-model="shipping_no" placeholder="请填写物流物流单号"></el-input>
      <div class="logistics-but">
        <el-button size="mini" type="primary" @click="fillinrefundlogistics">确定</el-button>
        <el-button size="mini" @click="logisticsisShow">关闭</el-button>
      </div>
    </div>
  </div>
</div>
</template>

<script lang="ts">
import { Component, Vue, Provide,Prop,Watch } from "vue-property-decorator";
import EditDialog from "./EditDialog.vue";
import ExamineDialog from "./ExamineDialog.vue";
import RefundDetails from "./RefundDetails.vue"
import businessApi from "@/api/business";
import supplierApi from "@/api/supplier";
// import { State, Getter, Mutation, Action } from "vuex-class";
import orderApi from "@/api/order";
@Component({
  components: {EditDialog,ExamineDialog,RefundDetails }
})
export default class refundOrderList extends Vue {
  // @Getter("user") getUser: any;
  logistics: any = [];//第三方物流信息
  logisticsShow: Boolean = false;
  logisticsNews: any = {} ;//物流信息
  shipping_company: any = ''//物流公司
  shipping_code: any = ''//物流编号
  shipping_no: any = ''//物流单号
  order_id:any = ''//订单ID
  @Provide() dateTime: any = ["",""]; // 时间
  @Provide() tHeight: number = document.body.offsetHeight - 323;
  @Provide() Height:any=''
  @Provide() tableData: any = []; // 表格数据
  @Provide() newTableData: any = []; // 表格数据
  @Provide() multipleTable: any = []; // 表格数据
  @Provide() page: number = 1; // 当前page
  @Provide() size: number = 10; // 请求数据的个数 默认5
  @Provide() total: number = 0; // 总数据条数
  @Provide() isRefund1: Boolean = false; // 审核弹窗
  @Provide() isAdd1: Boolean = false; // 是否展示添加弹窗
  @Provide() isRefund: Boolean = false; // 审核弹窗
  @Provide() isAdd: Boolean = false; // 是否展示添加弹窗
  @Provide() tabShow: Boolean = true; // 是显示否列表页面
  @Prop({}) tabVisible!: any;
  @Provide() supplierList: any=[];//供应商列表
  @Provide() businessList: any=[];//商家列表
  @Provide() state: boolean = true; // 黑白名单状态
  @Provide() orderInfo: any = []; 
  @Provide() details: Boolean = false; // 退款订单详情弹窗
  @Provide() details1: Boolean = false; // 退款订单详情弹窗
  @Provide() refundDataDetail: any = {}; // 退款订单详情弹窗
  @Provide() loading: Boolean = true; // 是否显示加载图标
  @Provide() refundId: number = 0;
  @Provide() searchMap:{
    keyword: string,
    order_sn: string,
    shipping_type:string,
    vendor_id:any,
    shop_id:any,
    status:string,
  }={
    keyword: "",
    order_sn: "",
    shipping_type:"",
    vendor_id:"",
    shop_id:"",
    status:"" ,
  }
  @Provide() searchMapS:{//供应商查询条件
    name: string,
    phone:string,
  }={
    name:'',
    phone:''
  }
  @Provide() searchMapB:{
    keyword: string,
    cate_id: string,
    is_child: any,
  }={
    keyword: "",
    cate_id: "",
    is_child: 0
  }
  @Provide() formData:any={
    id:"",
    shipping_company:"",
    shipping_no:""
  }
   @Provide() refundData:any={
    id:"",
    status:"",
    reason:"",
    refund_amount:""
  }
  @Provide() manage: any = '';//管理员
  @Watch("$route") handleRouteChange(to: any,form:any) {
    if(form.path!='/refundOrderList'){
      this.tabShow=this.tabVisible;
    }
  }
  @Watch("Height")
  changeHeight(){
    (this.$refs.tableBox as HTMLDivElement).style.height=this.Height + 10+ 'px'
  }
  handleDetail(){
    this.tabShow=false
  }
  logisticsisShow() {
    this.logisticsShow = false
  }
  // 退款订单详情
  handleRefund(data){
    this.isAdd1=true
    this.isRefund1=true
    this.details1=true
    this.refundDataDetail=data
  }
  // 审核
  handleAdd(data){
    this.refundData.id=data.id
    this.isRefund=true;
    console.log(data)
    if(data.refund_expect_total) {
      this.refundData.refund_expect=data.refund_expect_total
    }else {
      this.refundData.refund_expect=data.refund_expect
    }
    console.log(this.refundData.refund_expect)
  }
  // 关闭弹窗
  closeDialog() {
    this.isAdd = false;
    this.isRefund=false;
    this.details=false
  }
  closeDialog1() {
    this.isAdd1 = false;
    this.isRefund1=false;
    this.details1=false
  }
  created() {
    this.Height=document.body.offsetHeight - 323
    this.loadData();
    if(this.$route.path!='/refundOrderList'){
      this.tabShow=false
    }
    
  }

  loadData() {
    // 判断管理员权限
    let manage:any=localStorage.getItem('manage')
    this.manage=JSON.parse(manage).type
    if(this.manage=='admin'){
      // 商家
      businessApi.businessList(1,999999,this.searchMapB)
        .then((res: any) => {
          this.businessList = res.data.data.list;
      });
      // 供应商
      supplierApi.supplierList(1,999999,this.searchMapS)
        .then((res: any) => {
          this.supplierList = res.data.data.lists.data;
      });
    }
    orderApi.refundList(this.page,this.size,this.searchMap)
      .then((res: any) => { 
        this.tableData = res.data.data.list
        this.total = res.data.data.total
        this.loading=false
      });
  }
  arraySpanMethod({row, column, rowIndex, columnIndex }) {
    // if (columnIndex === 4 || columnIndex === 5|| columnIndex === 6 || columnIndex === 7) {
    //     for (let index in this.tableData) {
    //       if (this.tableData[index].id == row.order_id) {
    //          return [this.tableData[index].order_item.length, 1];
    //       }
    //     }
    // }
  }
  handleSizeChange(val: number): void {
    this.size = val;
    this.page = 1;
    this.loadData();
  }
  handleCurrentChange(val: number): void {
    this.page = val;
    this.loadData();
  }
  handleSearch(): void {
    // 点击搜索
    this.page = 1;
    this.loadData();
  }
  //第三方订单推送
  pushrefundorder(ids:any) {
    orderApi.pushrefundorder({id:ids})
    .then((res:any)=>{
      if(res.data.status){
        this.$message({
        message: '操作成功',
        type: "success"
        });
        this.$emit("closeDialog");
        this.$emit("loadData")
      }else{
          this.$message({
          message: res.data.msg,
          type: "error"
          });
      }
    })
  }

  handleCancelRefund(row){
    this.$confirm("确认取消退款吗?", '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        orderApi.cancelRefund(row.id).then((res: any) => {
        const resp = res.data;
        if(resp.code !==200){
          this.$message.error(resp.msg)
          return false;
        }

        this.$message.success('操作成功')
        this.loadData();
      })
      }).catch(() => {
                  
      });
    }
  //取消供应商退款申请
  applicationfordrawback(id:any) {
    orderApi.applicationfordrawback({id:id})
    .then((res:any)=>{
      if(res.data.status){
        this.$message({
        message: '操作成功',
        type: "success"
        });
        this.$emit("closeDialog");
        this.$emit("loadData")
      }else{
          this.$message({
          message: res.data.msg,
          type: "error"
          });
      }
    })
  }
  //获取物流信息
  getrefundLogistics(id:any) {
    this.order_id = id
    this.refundId = id;
    orderApi.getrefundLogistics({id:id})
    .then((res:any)=>{
      console.log(res.data.data)
      if(res.data.data.length==0) {
        this.logistics = []
      }else {
        this.logistics = res.data.data
      }
    })
    this.logisticsShow = true
  }
  //填写物流信息
  fillinrefundlogistics(id:any) {
    let data = {
      refund_id: this.refundId,
      shipping_company: this.shipping_company,
      shipping_code: this.shipping_code,
      shipping_no: this.shipping_no
    }
    if(this.logistics.length!==0) {
      data.shipping_company = this.logisticsNews.logistics_name
      data.shipping_code = this.logisticsNews.logistics_code
    } 
    orderApi.fillinrefundlogistics(data)
    .then((res:any)=>{
      if(res.data.status){
        this.$message({
        message: '操作成功',
        type: "success"
        });
        this.$emit("closeDialog");
        this.$emit("loadData")
      }else{
          this.$message({
          message: res.data.msg,
          type: "error"
          });
      }
    })
    this.logisticsShow = false
  }
}
</script>

<style lang="scss">
.user-info-item {
  width: 100%;
  display: flex;
  padding: 10px 0;
  span {
    display: inline-block;
  }
  span:first-of-type {
    width: 150px;
    text-align: right;
  }
  span:last-of-type {
    padding-left: 15px;
  }
}
.el-range-editor.el-input__inner{
  margin-right: 10px
}
.order-bot,.order-top{
  background: rgba(242, 242, 242, 0.99);
  height: 40px;
  line-height: 40px;
  padding: 0 10px;
}
.order-top{
  span{
    margin-right: 30px;
  }
}
.order-bot{
  span{
    color: red;
  }
}
.phone {
  >span:nth-child(1) {
    font-weight: 800;
  }
  >span:nth-child(2) {
    margin-left: 4px;

  }
}
.information1 {
  display: flex;
}
.logistics {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
  background: rgba(0,0,0,.4);
  .logistics-box {
    width: 350px;
    height: 350px;
    background: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -200px;
    margin-top: -200px;
    padding: 50px;
    >div:nth-child(1) {
      font-size: 24px;
      text-align: center;
      margin-bottom: 20px;
    }
    >.logistics-but  {
      margin-top: 20px;
      text-align: center;
    }
  }
}

.commodity-name{
      display:flex;
      flex-wrap: nowrap;
      padding: 6px;
      .commodity-image{
        width: 50px;
        height:50px;
      }
      p{
        margin:auto 10px;
      }
    }
.el-table .cell {
  text-align: center !important;
}
.el-button+.el-button {
  margin-top: 10px;
}
</style>
